<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>Filament Group Lab Example From: jQuery Visualize Plugin: Accessible Charts &amp; Graphs from Table Elements using HTML 5 Canvas</title>	
		<link rel="shortcut icon" href="/images/favicon2.ico" type="image/x-icon" />
		<link href="/style/demoPages" media="screen" rel="Stylesheet" type="text/css" />
		<link type="text/css" rel="stylesheet" href="visualize.jQuery.css"/>
		<link type="text/css" rel="stylesheet" href="demopage.css"/>
		<script type="text/javascript" src="jquery.min.js"></script>

		<!--[if IE]><script type="text/javascript" src="excanvas.compiled.js"></script><![endif]-->
		<script type="text/javascript" src="visualize.jQuery.js"></script>
		<script type="text/javascript">
		
			$(function(){
				$('table').visualize();
			
				//hide table
				$('table').addClass('accessHide');
				
				$('.chartConfiguratorThingy')
					.show()
					.find('.typeOptions>.fieldGroup>input[type=radio]')
						.bind('updateDependencies',function(){
							if($(this).is(':checked')){
								$(this).next().next(':hidden').slideDown(function(){ $(this).find('input,select').removeAttr('disabled');  });
							}
							else{
								$(this).next().next(':visible').slideUp(function(){ $(this).find('input,select').attr('disabled','disabled'); });
							}
						})
						.trigger('updateDependencies')
						.click(function(){ $('.typeOptions>.fieldGroup>input[type=radio]').trigger('updateDependencies'); })
						.end()
					.bind('click keyup',function(){
						var chartOptions = {};
						var formVars = $(this).serialize();
						$.each(formVars.split('&'),function(){
							var thisPair = this.split('=');
							if(thisPair[1]){ 
								//fix non-string types
								var thisVal = unescape(thisPair[1]);
								//bool true
								if(thisVal == 'true'){ thisVal = true; }
								//bool false
								if(thisVal == 'false'){ thisVal = false; }
								//arrays
								if(thisPair[0] == 'colors' || thisPair[0] == 'textColors'){
									thisVal = thisVal.replace(/[\[\]\']/g,'').split(',');
								}
								
								chartOptions[thisPair[0]] = thisVal;
							}
						});
						$('.visualize').remove();
						$('table').visualize(chartOptions);
					});	
				
			});
		</script>
	<script src="/mint/?js" type="text/javascript"></script>
</head>
	<body>	
<div id="demoHeader">
		<a href="/"><img src="/images/logo_examples.png" alt="Filament Group, Inc." width="141" height="26" id="logo" /></a>	
		<h1>This is an example from the Filament Group Lab Article: <a href="/lab/jquery_visualize_plugin_accessible_charts_graphs_from_tables_html5_canvas/">jQuery Visualize Plugin: Accessible Charts &amp; Graphs from Table Elements using HTML 5 Canvas</a></h1>

		<p id="copyright">&copy;2010 Filament Group, Inc. All Rights Reserved.</p>
</div><!-- /demoHeader -->
	<form class="chartConfiguratorThingy">
		<h2>Visualize Options:</h2>
		<fieldset class="typeOptions">
			<legend>Chart Type Options</legend>
			
				<div class="fieldGroup">
					<input type="radio" name="type" id="bar" value="bar" checked="checked" />

					<label for="bar" class="radio">Bar</label>
					<div class="dependencies">
						<div class="fieldGroup">
							<label for="barMargin">barMargin:</label>
							<input type="text" name="barMargin" id="barMargin" value="1" />
						</div>
						<div class="fieldGroup">
							<label for="barGroupMargin">barGroupMargin:</label>

							<input type="text" name="barGroupMargin" id="barGroupMargin" value="10" />
						</div>
					</div>
				</div>
				<div class="fieldGroup">
					<input type="radio" name="type" id="line" value="line" />
					<label for="line" class="radio">Line</label>
					<div class="dependencies">

						<div class="fieldGroup">
							<label for="lineWeight">lineWeight</label>
							<input type="text" name="lineWeight" id="lineWeight" value="4" />
						</div>
					</div>
				</div>
				<div class="fieldGroup">
					<input type="radio" name="type" id="area" value="area" />

					<label for="area" class="radio">Area</label>
					<div class="dependencies">
						<div class="fieldGroup">
							<label for="lineWeight">lineWeight</label>
							<input type="text" name="lineWeight" id="lineWeight" value="4" />
						</div>
					</div>
				</div>

				<div class="fieldGroup">
					<input type="radio" name="type" id="pie" value="pie" />
					<label for="pie" class="radio">Pie</label>
					<div class="dependencies">
						<div class="fieldGroup">
							<label for="pieMargin">pieMargin</label>
							<input type="text" name="pieMargin" id="pieMargin" value="20" />
						</div>

						<div class="fieldGroup">
							<label for="pieLabelPos">pieLabelPos:</label>
							<select name="pieLabelPos" id="pieLabelPos">
								<option value="inside">inside</option>
								<option value="outside">outside</option>
							</select>
						</div>

					</div>
				</div>
			</fieldset>
			
			
			<fieldset>
			<legend>Global Options:</legend>
			
			<div class="fieldGroup">
				<label for="width">Width:</label>
				<input type="text" name="width" id="width" value="" />

			</div>
			
			<div class="fieldGroup">
				<label for="height">Height:</label>
				<input type="text" name="height" id="height" value="" />
			</div>
			
			<div class="fieldGroup">
				<label for="appendTitle">appendTitle:</label>
				<select name="appendTitle" id="appendTitle">

					<option value="true">True</option>
					<option value="false">False</option>
				</select>
			</div>
			
			<div class="fieldGroup">
				<label for="title">title:</label>
				<input type="text" name="title" id="title" value="" />

			</div>
			
			<div class="fieldGroup">
				<label for="appendKey">appendKey:</label>
				<select name="appendKey" id="appendKey">
					<option value="true">True</option>
					<option value="false">False</option>
				</select>

			</div>
			
			<div class="fieldGroup">
				<label for="colors">colors:</label>
				<input type="text" name="colors" id="colors" value="['#be1e2d','#666699','#92d5ea','#ee8310','#8d10ee','#5a3b16','#26a4ed','#f45a90','#e9e744']" />
			</div>
			
			<div class="fieldGroup">
				<label for="textColors">textColors:</label>
				<input type="text" name="textColors" id="textColors" value="[]" />

			</div>
			
			<div class="fieldGroup">
				<label for="parseDirection">parseDirection:</label>
				<select name="parseDirection" id="parseDirection">
					<option value="x">x</option>
					<option value="y">y</option>
				</select>

			</div>
			
		</fieldset>
	
	</form>



<table >
	<caption>2009 Individual Sales by Category</caption>
	<thead>
		<tr>

			<td></td>
			<th>food</th>
			<th>auto</th>
			<th>household</th>
			<th>furniture</th>
			<th>kitchen</th>

			<th>bath</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>Mary</th>
			<td>150</td>

			<td>160</td>
			<td>40</td>
			<td>120</td>
			<td>30</td>
			<td>70</td>
		</tr>

		<tr>
			<th>Tom</th>
			<td>3</td>
			<td>40</td>
			<td>30</td>
			<td>45</td>

			<td>35</td>
			<td>49</td>
		</tr>
		<tr>
			<th>Brad</th>
			<td>10</td>
			<td>180</td>

			<td>10</td>
			<td>85</td>
			<td>25</td>
			<td>79</td>
		</tr>
		<tr>
			<th>Kate</th>

			<td>40</td>
			<td>80</td>
			<td>90</td>
			<td>25</td>
			<td>15</td>
			<td>119</td>

		</tr>		
	</tbody>
</table>
	</body>
</html>